<template>
  <div class="feedback-container">
    <div class="page-header">
      <h1 class="page-title">反馈优化</h1>
      <p class="page-description">提交您的使用反馈，帮助我们持续优化生成效果</p>
    </div>

    <div class="feedback-form">
      <div class="form-section">
        <h3 class="section-title">反馈类型</h3>
        <div class="feedback-types">
          <label 
            v-for="type in feedbackTypes" 
            :key="type.value"
            class="type-option"
          >
            <input 
              type="radio" 
              v-model="feedbackForm.type" 
              :value="type.value"
            >
            <span class="type-label">{{ type.label }}</span>
          </label>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">功能模块</h3>
        <select v-model="feedbackForm.module" class="form-select">
          <option value="">请选择功能模块</option>
          <option v-for="module in modules" :key="module.value" :value="module.value">
            {{ module.label }}
          </option>
        </select>
      </div>

      <div class="form-section">
        <h3 class="section-title">详细描述</h3>
        <textarea 
          v-model="feedbackForm.description"
          class="form-textarea"
          placeholder="请详细描述您遇到的问题或建议..."
          rows="6"
        ></textarea>
      </div>

      <div class="form-section">
        <h3 class="section-title">联系方式（可选）</h3>
        <input 
          v-model="feedbackForm.contact"
          type="text"
          class="form-input"
          placeholder="邮箱或手机号，便于我们回复您"
        >
      </div>

      <div class="form-actions">
        <button 
          @click="submitFeedback"
          :disabled="!canSubmit || isSubmitting"
          class="submit-btn"
        >
          {{ isSubmitting ? '提交中...' : '提交反馈' }}
        </button>
        <button @click="resetForm" class="reset-btn">重置</button>
      </div>
    </div>

    <!-- 反馈历史 -->
    <div class="feedback-history" v-if="feedbackHistory.length > 0">
      <h3 class="section-title">我的反馈记录</h3>
      <div class="history-list">
        <div 
          v-for="item in feedbackHistory" 
          :key="item.id"
          class="history-item"
        >
          <div class="history-header">
            <span class="history-type">{{ getTypeLabel(item.type) }}</span>
            <span class="history-time">{{ item.createdAt }}</span>
            <span :class="['history-status', item.status]">{{ getStatusLabel(item.status) }}</span>
          </div>
          <p class="history-description">{{ item.description }}</p>
          <div class="history-reply" v-if="item.reply">
            <strong>回复：</strong>{{ item.reply }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../../stores/userStore'
import apiService from '../../api'

const router = useRouter()
const userStore = useUserStore()

// 反馈表单数据
const feedbackForm = ref({
  type: '',
  module: '',
  description: '',
  contact: ''
})

// 提交状态
const isSubmitting = ref(false)

// 反馈类型
const feedbackTypes = [
  { label: '功能建议', value: 'suggestion' },
  { label: '问题反馈', value: 'bug' },
  { label: '使用体验', value: 'experience' },
  { label: '其他', value: 'other' }
]

// 功能模块
const modules = [
  { label: '教学设计生成', value: 'design' },
  { label: '多媒体资源生成', value: 'media' },
  { label: '练习题生成', value: 'exercise' },
  { label: '试卷生成', value: 'paper' },
  { label: 'PPT主题生成', value: 'ppt' },
  { label: '个性化定制', value: 'custom' },
  { label: '系统整体', value: 'system' }
]

// 反馈历史
const feedbackHistory = ref([])

// 是否可以提交
const canSubmit = computed(() => {
  return feedbackForm.value.type && 
         feedbackForm.value.module && 
         feedbackForm.value.description.trim().length > 10
})

// 获取类型标签
const getTypeLabel = (type) => {
  const typeObj = feedbackTypes.find(t => t.value === type)
  return typeObj ? typeObj.label : type
}

// 获取状态标签
const getStatusLabel = (status) => {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    closed: '已关闭'
  }
  return statusMap[status] || status
}

// 提交反馈
const submitFeedback = async () => {
  if (!canSubmit.value || isSubmitting.value) return
  
  isSubmitting.value = true
  
  try {
    const response = await apiService.feedback.submit({
      ...feedbackForm.value,
      userId: userStore.userInfo.id
    })
    
    if (response && response.success) {
      alert('反馈提交成功！感谢您的建议')
      resetForm()
      loadFeedbackHistory()
    } else {
      throw new Error(response?.message || '提交失败')
    }
  } catch (error) {
    console.error('提交反馈失败:', error)
    alert('提交失败，请稍后重试')
  } finally {
    isSubmitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  feedbackForm.value = {
    type: '',
    module: '',
    description: '',
    contact: ''
  }
}

// 加载反馈历史
const loadFeedbackHistory = async () => {
  try {
    const response = await apiService.feedback.getHistory({
      userId: userStore.userInfo.id
    })
    
    if (response && response.data) {
      feedbackHistory.value = response.data
    }
  } catch (error) {
    console.error('加载反馈历史失败:', error)
  }
}

// 页面加载时获取数据
onMounted(() => {
  userStore.initUserData()
  loadFeedbackHistory()
})
</script>

<style scoped>
.feedback-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.page-description {
  color: #666;
  font-size: 16px;
}

.feedback-form {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.form-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 600;
}

.feedback-types {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.type-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.type-option:hover {
  border-color: #4CAF50;
}

.type-option input[type="radio"] {
  margin-right: 8px;
}

.type-option input[type="radio"]:checked + .type-label {
  color: #4CAF50;
  font-weight: 600;
}

.form-select,
.form-input,
.form-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: #4CAF50;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.submit-btn,
.reset-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn {
  background: #4CAF50;
  color: white;
}

.submit-btn:hover:not(:disabled) {
  background: #45a049;
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.reset-btn {
  background: #f5f5f5;
  color: #666;
}

.reset-btn:hover {
  background: #e0e0e0;
}

.feedback-history {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.history-list {
  space-y: 15px;
}

.history-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.history-type {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.history-time {
  color: #999;
  font-size: 14px;
}

.history-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.history-status.pending {
  background: #fff3e0;
  color: #f57c00;
}

.history-status.processing {
  background: #e8f5e8;
  color: #4caf50;
}

.history-status.resolved {
  background: #e3f2fd;
  color: #1976d2;
}

.history-status.closed {
  background: #fafafa;
  color: #757575;
}

.history-description {
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.history-reply {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #4CAF50;
}

@media (max-width: 768px) {
  .feedback-container {
    padding: 15px;
  }
  
  .feedback-form {
    padding: 20px;
  }
  
  .feedback-types {
    flex-direction: column;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>